<div nz-row class="mb30">
  <button nz-button nzType="primary" nzSize="large" nzShape="circle" (click)="backward()">
    <i nz-icon nzType="arrow-left" nzTheme="outline"></i>
  </button>
</div>

<div nz-row>
  <nz-card [nzBordered]="false" nzTitle="新建服务器">
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>服务器别名(备注)</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="nameErrorTpl">
          <input nz-input formControlName="name" placeholder="请输入服务器别名"/>
          <ng-template #nameErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入服务器别名!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>服务器地址</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="检测中..." [nzErrorTip]="hostErrorTpl">
          <input nz-input formControlName="host" placeholder="请输入服务器IP"/>
          <ng-template #hostErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入服务器地址!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              服务器地址重复!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>服务器用户名</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="usernameErrorTpl">
          <input nz-input formControlName="username" placeholder="服务器用户名"/>
          <ng-template #usernameErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入服务器用户名!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>服务器密码</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
          <input type="password" nz-input formControlName="password" placeholder="服务器密码"/>
          <ng-template #passwordErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入服务器密码!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>服务器端口号</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="portErrorTpl">
          <input nz-input formControlName="port" placeholder="服务器端口号"/>
          <ng-template #portErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入服务器端口号!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button nz-button nzType="primary" [disabled]="!validateForm.valid">提交</button>
          <button nz-button (click)="resetForm($event)">重置</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>
</div>
